<template>
  <div id="dynamic">
    <Row>
      <Col :md="{span:12,push:6}" :xs="{span:22,push:1}">
        <Timeline>
            <TimelineItem v-for="(v,i) in dynamic_data" :key="v.i" v-if="i>=minpage && i<maxpage">
              <Row>{{v.time}}</Row>
              <Row>
                <Col :md="{span:24}" :xs="{span:24}">
                <Card>
                  <div style="text-align:center">
                    <div class="img_box">
                      <img v-gallery :src="src+v.img" class="img">
                    </div>
                    <h3>{{v.text}}</h3>
                  </div>
                </Card>
                </col>
              </Row>
            </TimelineItem>
        </Timeline>
        <Row type="flex" justify="space-around">
          <Col>
            <Page :current="current" :total="total" :page-size="pagesize" simple @on-change="handlePage" />
          </Col>
        </Row>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: 'Dynamic',
  data () {
    return {
      src:this.$src+'tp5_jzt-blog_server/public/uploads/dynamic/',
      dynamic_data: '',
      total: 0,
      pagesize: 5,
      current: 1,
      minpage: 0,
      maxpage:5,
    }
  },
  components: {

  },
  methods: {
    getDynamic() {
      this.$axios({
        method: 'post',
        url: 'tp5_jzt-blog_server/public/index.php/home/getdynamic',
      }).then((res) => {
        console.log('动态数据：',res.data);
        this.dynamic_data = res.data;
        this.total = res.data.length;
      }).catch((error) => {
        console.log(error)
      })
    },
    handlePage(value) {
      this.current= value
      this.minpage=(value-1)*this.pagesize
      this.maxpage=(value)*this.pagesize
    },
  },
  created() {
    this.getDynamic();
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#dynamic{
    padding: 15px 15px 80px 15px;
  }
.img_box {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
  }

  .img_box .img {
    display: block;
    margin: 0 auto;
    height: 100%;
  }
</style>
